<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="webkit|ie=edge">
    <title>Exp-Inlet-Gateway</title>

    <script src="/static/framework/jquery.min.js"></script>
    <script src="/static/framework/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/static/framework/bootstrap.min.css">
    <link rel="stylesheet" href="/static/style/main.css">
</head>
<#--  以下JS文件必须在JQuery加载完才能加载  -->
<script src="/static/script/main.js"></script>
<#--  以下JS文件必须在JQuery加载完才能加载  -->
<body class="container"  style="font-size: 16px;min-width: 1180px">
<nav class="navbar navbar-expand-lg navbar-light container-fluid">
    <div class="container-fluid  bg-light">
        <a href="/static/app/list" class="navbar-brand text-start"
           style="font-family: 微软雅黑,serif; color: #3030ff; font-size: 24px;">Exp-Inlet</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" aria-label="breadcrumb" style="line-height: 1px; text-align: center;align-items: center;">
            <ol class="breadcrumb" style="margin-bottom: 0;">
<#--                <li class="breadcrumb-item"><a href="#">Exp-Inlet</a></li>-->
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/app/list">应用列表</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/api/list/${context.api.appName}" >接口列表</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="#">接口详情</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/SysInfos.html">运行状态</a></li>
            </ol>
        </div>
        <form class="d-flex">

            <input class="form-control w-75 me-2" style="height: 32px;" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" style="width: 80px" type="submit" onclick="$.loginOut()"><a class="" href="javascript:;"><span>退出</span></a></button>
        </form>
    </div>
</nav>
<input type="hidden" id="appName" value="${context.api.appName}">
<div class="show-tips-model" style="display: none;">
    <div class="tips-body">
        <div class="tips-info">
           	 API启动中...
        </div>
        <h1 class="tips-progress"></h1>
    </div>
</div>
<div class="ng-scope container">
    <div class="ng-scope">
        <div class="row mt-4 mb-2">
            <div class="col-md-9" style="line-height: 30px;">
                <span class="scope">  </span>
            </div>
            <div class="col-md-1">
                <#if context.api.online == true>
                    <button type="button" class="btn btn-warning right" onclick="stopAPI('${context.api.appName}','${context.api.apiName}')" style="margin-top: 2px;">暂停</button>
                <#else>
                    <button type="button" class="btn btn-success right" onclick="startAPI('${context.api.apiName}')" >启动</button>
                </#if>
            </div>
            <div class="col-md-1">
                <a href="/static/api/update/${context.api.apiName}">
                    <button type="button" class="btn btn-primary right" >修改</button>
                </a>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger right" onclick="del('${context.api.appName}','${context.api.apiName}')">删除</button>
            </div>
        </div>

        <div class="console-panel">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <table width="100%">
                    <tr>
                        <td width="70%" style="font-weight: bold">名称及描述</td>
                    </tr>
                </table>
            </div>
            <table class="console-panel-body">
                <tbody>
                <tr>
                    <td width="50%" class="">
                        <span class="console-grey console-mr3 ">API名称 : </span><span class="text-primary">${context.api.apiName}</span>
                    </td>
                    <td class="">
                        <span class="console-grey console-mr3 ">创建时间 : </span><span class="text-primary">${context.api.apiCreateTime!}</span>
                    </td>
                </tr>
                <tr>
                    <td class="">
                        <span class="console-grey console-mr3 ">安全认证 : </span><span class="text-primary"><#if context.api.authOptions?exists>${context.api.authOptions.inFactoryName}<#else>不认证</#if></span>
                    </td>
                    <td class="">
                        <span class="console-grey console-mr3 ">访问限制 : </span><span class="text-primary"><#if context.api.limitUnit?exists>统计范围 : ${context.api.limitUnit} | 请求次数限制 : ${context.api.apiLimit} | IP访问次数限制 : ${context.api.ipLimit}<#else>不限制</#if></span>
                    </td>
                </tr>
                <#if context.api.beforeHandlerOptions?exists || context.api.afterHandlerOptions?exists >
	                <tr>
	                    <td class="">
	                    	<#if context.api.beforeHandlerOptions?exists>
		                        <span class="console-grey console-mr3 ">前置处理器 : </span><span class="text-primary">${context.api.beforeHandlerOptions.inFactoryName}</span>
	                        </#if>
	                    </td>
	                    <td class="">
	                    	<#if context.api.afterHandlerOptions?exists>
	                        	<span class="console-grey console-mr3 ">后置处理器 : </span><span class="text-primary">${context.api.afterHandlerOptions.inFactoryName}</span>
	                    	</#if>
	                    </td>
	                </tr>
                </#if>
                <tr>
                    <td colspan="2">
                        <div>
                            <span class="console-grey console-mr3 ">描述 : </span>
                            <br>
                            <br>
                            <div  style="font-style: italic;">
                                <pre style="white-space: pre-wrap;word-wrap: break-word;" class=""><span class="text-primary">${context.api.apiDescribe!}</span></pre>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="console-panel console-mt4 mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left" style="font-weight: bold">请求API定义</div>
            </div>
            <table class="console-panel-body">
                <tbody>
                <tr>
                    <td width="50%" class="">
                        <span class="console-grey console-mr3">Path : </span><span class="text-primary">${context.api.path}</span>
                    </td>
                    <td class="">
                        <span class="console-grey console-mr3 ">HTTP Method : </span><span class="text-primary">${context.api.method}</span>
                    </td>
                </tr>
                <#if context.api.consumes?exists>
	                <tr>
	                    <td colspan="2">
	                        <span class="console-grey console-mr3 ">请求类型/consumes : </span>
                                <span class="text-primary">
	                        	<#list context.api.consumes as item>
									${item} <#sep> , </#sep>
								</#list>
                                </span>
	                    </td>
	                </tr>
                </#if>
                <#if context.api.passBody?exists>
                	<tr>
	                    <td width="50%" class="">
	                        <span class="console-grey console-mr3">透传Body : </span><span class="text-primary">${context.api.passBody?c}</span>
	                    </td>
	                    <td class="">
	                        <span class="console-grey console-mr3 ">Body参数可以被Query获取  : </span><span class="text-primary"><#if context.api.bodyAsQuery?exists>${context.api.bodyAsQuery?c}</#if></span>
	                    </td>
               		</tr>
                </#if>
                <tr>
                    <td colspan="2" style="border-bottom: 0;">
                        <span class="console-grey console-mr3 ">请求入参信息 : </span>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid">
                <table>
                    <tbody>
                    <tr>
                         <th width="13%" class="">参数名</th>
                        <th width="13%" class="">参数位置</th>
                        <th width="13%" class="">类型</th>
                        <th width="13%" class="">必填</th>
                        <th class="14%">默认值</th>
                        <th class="14%">描述</th>
                        <th class="20%">条件信息</th>
                    </tr>
                    <#if context.api.enterParam?exists>
                   	 	<#list context.api.enterParam as item>
	                    	<tr>
	                        	<td>${item.paramName!}</td>
	                        	<td>${item.position!}</td>
	                        	<td>${item.paramType!}</td>
	                        	<td>${item.isNotNull?c}</td>
	                        	<td>${item.def!}</td>
	                        	<td>${item.describe!}</td>
	                        	<td>
	                        		<#if item.checkOptions?exists>
	                        			<#if item.checkOptions.maxLength?exists>最大长度:${item.checkOptions.maxLength?c} </#if> 
	                        			<#if item.checkOptions.maxValue?exists> 最大值:${item.checkOptions.maxValue?c}</#if>
	                        			<#if item.checkOptions.minValue?exists> , 最小值:${item.checkOptions.minValue?c}</#if>
	                        			<#if item.checkOptions.regex?exists><br>正则:${item.checkOptions.regex}</#if>
	                        			<#if item.checkOptions.enums?exists><br>枚举:
											<#list item.checkOptions.enums as item>${item} <#sep> , </#sep></#list>
										</#if>
	                        		</#if>
	                        	</td>
	                  	  </tr>
	                    </#list>	
                    </#if>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="console-panel console-mt4 ng-scope  mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">后端服务信息</div>
            </div>
            <table class="console-panel-body">
                <tbody>
                <!--HTTP/HTTPS类型-->
                <#if context.api.serverEntrance.serverType == "HTTP_HTTPS">
	                <tr>
	                    <td width="50%" class="">
	                        <span class="console-grey console-mr3 ">后端服务类型 : </span><span class="text-primary">HTTP/HTTPS</span>
	                    </td>
	                    <td class=""><span class="console-grey console-mr3 ">后端超时 : </span><span class="text-primary">${context.api.serverEntrance.body.timeOut?c}</span> ms</td>
	                </tr>
	                <tr>
	                    <td class=""><span class="console-grey console-mr3">HTTP Method : </span><span class="text-primary">${context.api.serverEntrance.body.method}</span></td>
	                    <td class=""><span class="console-grey console-mr3 ">负载均衡模式 : </span><span class="text-primary">${context.api.serverEntrance.body.balanceType}</span></td>
	                </tr>
	                <tr>
	                    <td colspan="2"><span class="console-grey console-mr3 ">后端服务地址 : </span></td>
	                </tr>
					<#list context.api.serverEntrance.body.serverUrls as item >
		                <tr>
		                    <td colspan="2">URL : <span class="text-primary">${item.url}</span> , 权重 : <span class="text-primary">${item.weight}</span></td>
		                </tr>
	                </#list>
                </#if>
                <!--常量/变量服务类型-->
                 <#if context.api.serverEntrance.serverType == "CUSTOM">
	                <tr>
	                    <td width="50%" class="">
	                        <span class="console-grey console-mr3 ">后端服务类型 : </span> 自定义服务
	                    </td>
	                    <td class=""><span class="console-grey console-mr3 ">服务类型 : </span><span class="text-primary"> ${context.api.customFactoryName!}</span></td>
	                </tr>
	                <tr>
	                    <td colspan="2">
	                        <div>
	                            <span class="console-grey console-mr3 ">配置文件 : </span>
	                            <br>
	                            <br>
	                            <pre style="white-space: pre-wrap;word-wrap: break-word;" class="">
	                            	<#t>${context.api.customBody!}<#t>
	                            </pre>
	                        </div>
	                    </td>
	                </tr>
                </#if>
                <!--页面跳转-->
                <#if context.api.serverEntrance.serverType == "REDIRECT">
	                <tr>
	                    <td width="50%" class="">
	                        <span class="console-grey console-mr3 ">后端服务类型 : </span> 页面跳转
	                    </td>
	                    <td>
	                        <span class="console-grey console-mr3">跳转地址 : </span><span class="text-primary">${context.api.serverEntrance.body.url!}</span>
	                    </td>
	                </tr>
                </#if>
                </tbody>
            </table>
        </div>
        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">后端服务参数</div>
            </div>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid">
                <table>
                    <tbody>
                    <tr>
                        <th class="" width="20%">请求参数名称</th>
                        <th class="" width="20%">请求参数位置</th>
                        <th class="" width="20%">服务参数名称</th>
                        <th class="" width="20%">服务参数位置</th>
                        <th class="" width="20%">数据类型</th>
                    </tr>
                    <#if context.api.serverEntrance.body.params?exists>
                    	<#list context.api.serverEntrance.body.params as item>
                    		<#if item.type == 0>
			                    <tr>
			                        <td><span class="text-primary">${item.apiParamName!}</span></td>
			                        <td><span class="text-primary">${item.apiParamPosition!}</span></td>
			                        <td><span class="text-primary">${item.serParamName!}</span></td>
			                        <td><span class="text-primary">${item.serParamPosition!}</span></td>
			                        <td><span class="text-primary">${item.paramType!}</span></td>
			                    </tr>
		                    </#if>
	                    </#list>
                    </#if>
                    </tbody>
                </table>
                <div class="pagination-gird-container request-param-setter-errormessage  ng-hide">
                    <i class="icon-no-2 console-mr1 console-inline-block"></i>
                </div>
            </div>
        </div>

        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">透传参数</div>
            </div>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid">
                <table>
                    <tbody>
                    <tr>
                        <th width="25%">请求参数名字</th>
                        <th width="25%">请求参数位置</th>
                        <th width="25%">服务参数名字</th>
                        <th class="25%">服务参数位置</th>
                    </tr>
                     <#if context.api.serverEntrance.body.params?exists>
                    	<#list context.api.serverEntrance.body.params as item>
                    		<#if item.type == 2>
			                    <tr>
			                        <td><span class="text-primary">${item.apiParamName!}</span></td>
			                        <td><span class="text-primary">${item.apiParamPosition!}</span></td>
			                        <td><span class="text-primary">${item.serParamName!}</span></td>
			                        <td><span class="text-primary">${item.serParamPosition!}</span></td>
			                    </tr>
		                    </#if>
	                    </#list>
                    </#if>
                    </tbody>
                </table>
                <div class="pagination-gird-container request-param-setter-errormessage  ng-hide">
                    <i class="icon-no-2 console-mr1 console-inline-block"></i>
                </div>
            </div>
        </div>
        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">自定义常量参数</div>
            </div>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid">
                <table>
                    <tbody>
                    <tr>
                        <th width="25%">服务参数名称</th>
                        <th width="25%">参数值</th>
                        <th width="25%">服务参数位置</th>
                        <th class="25%">描述</th>
                    </tr>
                     <#if context.api.serverEntrance.body.params?exists>
                    	<#list context.api.serverEntrance.body.params as item>
                    		<#if item.type == 9>
			                    <tr>
			                        <td><span class="text-primary">${item.serParamName!}</span></td>
			                        <td><span class="text-primary">${item.paramValue!}</span></td>
			                        <td><span class="text-primary">${item.serParamPosition!}</span></td>
			                        <td><span class="text-primary">${item.describe!}</span></td>
			                    </tr>
		                    </#if>
	                    </#list>
                    </#if>
                    </tbody>
                </table>
                <div class="pagination-gird-container request-param-setter-errormessage  ng-hide">
                    <i class="icon-no-2 console-mr1 console-inline-block"></i>
                </div>
            </div>
        </div>
        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">系统参数</div>
            </div>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid">
                <table>
                    <tbody>
                    <tr>
                        <th width="25%">系统参数名</th>
                        <th width="25%">服务参数名称</th>
                        <th width="25%">参数位置</th>
                        <th class="25%">描述</th>
                    </tr>
                    <#if context.api.serverEntrance.body.params?exists>
                    	<#list context.api.serverEntrance.body.params as item>
                    		<#if item.type == 1>
			                    <tr>
			                        <td><span class="text-primary">${item.sysParamType!}</span></td>
			                        <td><span class="text-primary">${item.serParamName!}</span></td>
			                        <td><span class="text-primary">${item.serParamPosition!}</span></td>
			                        <td><span class="text-primary">${item.describe!}</span></td>
			                    </tr>
		                    </#if>
	                    </#list>
                    </#if>
                    </tbody>
                </table>
                <div class="pagination-gird-container request-param-setter-errormessage  ng-hide">
                    <i class="icon-no-2 console-mr1 console-inline-block"></i>
                </div>
            </div>
        </div>
        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left " style="font-weight: bold">返回结果</div>
            </div>
            <table class="console-panel-body">
                <tbody>
                <tr>
                    <td class="">
                        <span class="console-grey console-mr3 ">透传header值 : </span>
                        <span class="text-primary">
                        <#if context.api.result.tranHeaders?exists>
                        	<#list context.api.result.tranHeaders as item>
                        	 ${item}  <#sep> , </#sep>
                        	</#list>
                        </#if>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="">
                        <span class="console-grey console-mr3 ">返回Content-Type值 : </span><span class="text-primary">${context.api.contentType!}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="console-grey console-mr3 ">访问限制返回 : </span>
                        <br>
                        <div style="font-style: italic;">
                            <pre class="">
                                状态码: <span class="text-primary">${context.api.result.limitStatus?c} </span></br>
                                内容:  <span class="text-primary">${context.api.result.limitExample!}</span></pre>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="console-grey console-mr3 ">发生异常/失败返回 : </span>
                        <br>
                        <div style="font-style: italic;">
                            <pre class="">
                                状态码: <span class="text-primary">${context.api.result.failureStatus?c} </span></br>
                                内容: <span class="text-primary">${context.api.result.failureExample!}</span></pre>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="console-grey console-mr3 ">网关入口参数检查失败返回 : </span>
                        <br>
                        <div style="font-style: italic;">
                            <pre class="">
                                状态码: <span class="text-primary">${context.api.result.apiEnterCheckFailureStatus?c}</span> </br>
                                内容: <span class="text-primary">${context.api.result.apiEnterCheckFailureExample!}</span></pre>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="console-grey console-mr3 ">无法连接上后台服务器返回 : </span>
                        <br>
                        <div style="font-style: italic;">
                            <pre class="">
                                状态码: <span class="text-primary">${context.api.result.cantConnServerStatus?c}</span> </br>
                                内容: <span class="text-primary">${context.api.result.cantConnServerExample!}</span></pre>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="console-grey console-mr3 ">返回结果示例 : </span>
                        <br>
                        <div style="font-style: italic;">
                            <pre class=""><span class="text-primary">${context.api.result.successExample!}</span></pre>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <#if context.api.result.status?exists>
        <div class="console-panel console-mt4 ng-scope mt-4">
            <div class="console-panel-header">
                <span class="console-panel-header-line"></span>
                <div class="console-float-left ">自定义参数</div>
            </div>
            <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid" style="margin-bottom: 70px">
                <table>
                    <tbody>
                    <tr>
                        <th width="30%">错误码</th>
                        <th width="30%">错误信息</th>
                        <th width="40%">描述</th>
                    </tr>
                    <#list context.api.result.status as item>
	                    <tr>
	                        <td><span class="text-primary">${item.code!}</span></td>
	                        <td><span class="text-primary">${item.msg!}</span></td>
	                        <td><span class="text-primary">${item.describe!}</span></td>
	                    </tr>
                    </#list>
                    </tbody>
                </table>
                <div class="pagination-gird-container request-param-setter-errormessage  ng-hide">
                    <i class="icon-no-2 console-mr1 console-inline-block"></i>
                </div>
            </div>
        </div>
        </#if>
    	
    <div class="console-panel console-mt4 mt-4" style="margin-bottom: 60px;">
        <div class="console-panel-header">
            <span class="console-panel-header-line"></span>
            <table width="100%">
                <tr>
                    <td width="90%" style="font-weight: bold">API请求信息追踪</td>
                    <td width="10%">
                        <button class="btn btn-primary right" style="" onclick="reloadTrack('${context.api.appName}','${context.api.apiName}')">刷新数据</button>
                    </td>
                </tr>
            </table>
        </div>
        <table class="console-panel-body">
            <tbody style="text-align: center;">
            <tr>
                <td width="20%" class="">
                    <span class="console-grey console-mr3">请求次数 : </span>
                    <span class="track-request-count text-primary">-</span>
                    <span class="console-grey console-mr3">次</span>
                </td>
                <td width="20%" class="">
                    <span class="console-grey console-mr3 ">成功 : </span>
                    <span class="track-succeeded-count text-primary">-</span>
                    <span class="console-grey console-mr3">次</span>
                </td>
                <td width="20%">
                    <span class="console-grey console-mr3 ">失败 : </span>
                    <span class="track-succeeded-count text-primary">-</span>
                    <span class="console-grey console-mr3">次</span>
                </td>
                <td width="20%">
                    <span class="console-grey console-mr3 ">总处理平均用时 : </span>
                    <span class="avg-overall text-primary">/</span>
                    <span class="avg-console-grey console-mr3">(ms)</span>
                </td>
                <td  width="20%">
                    <span class="console-grey console-mr3 ">请求后台平均用时 : </span>
                    <span class="avg-request text-primary">/</span>
                    <span class="avg-console-grey console-mr3">(ms)</span>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="api-param-map-setter">
            <table class="console-panel-body">
                <tr>
                    <th width="20%" style="text-align: center">记录时间</th>
                    <th width="20%" style="text-align: center">总用时</th>
                    <th width="20%" style="text-align: center">请求用时</th>
                    <th width="20%" style="text-align: center">请求长度(byte)</th>
                    <th width="20%" style="text-align: center">响应长度(byte)</th>
                </tr>
                <tbody class="track-info-body">
                </tbody>
            </table>
        </div>
    </div>

    	
    
    </div>

    <div id="notice" class="position-fixed top-0 end-0 p-3 hide">
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong id="level">Success!</strong> <span id="content">This alert box could indicate a successful or positive action.</span>
        </div>
    </div>

<#--    <div aria-live="polite" aria-atomic="true" class="position-relative">-->
        <!-- Position it: -->
        <!-- - `.toast-container` 设置弹窗直接的空隙 -->
        <!-- - `top-0` & `end-0` 设置弹窗显示位置-->
        <!-- - `.p-3` 设置外边距  -->
<#--        <div class="toast-container top-0 end-0 p-3">-->
    <div class="position-fixed top-0 p-3 toast-center-center hide">
            <div class="alert alert-danger alert-dismissible fade show">
                <h4 class="alert-heading"><i class="bi-exclamation-octagon-fill"></i> Oops! Something went wrong.</h4>
                <p>Please enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.</p>
                <hr>
                <p class="mb-0">Once you have filled all the details, click on the 'Next' button to continue.</p>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
<#--    </div>-->

</div>


<script src="/static/script/main.js"></script>
<script >
//删除API
function del(appName,id) {
    if (window.confirm('删除API可能会影响你的业务,确定删除' + id + "吗?")) {
        $.ajax({
            type : "post",
            url : '/static/api/del/'+appName+'/'+ id,
            async : true,
            dataType : "json",
            success : function(result) {
                if (result.code !== 200) {
                     $.showNotice("ERROR", "删除失败!");
                    console.log("获取失败", result);
                    return
                }
                var res = result.data;
                if (res == 0) {
                     $.showNotice("ERROR", "删除失败!");
                    console.log(result)
                } else {
                     $.showNotice("ERROR", "删除成功!");
                    window.location.href="/static/api/list/"+$("#appName");
                }
            },
            error : function() {
                 $.showNotice("ERROR", "删除失败了!");
            }
        });
    }
}
//启动API
function startAPI(id) {
	$(".show-tips-model").fadeIn(300);
	 $.ajax({
         type : "post",
         url : '/static/api/start/' + id,
         async : true,
         dataType : "json",
         success : function(result) {
        	 $(".show-tips-model").hide();
             debugger
             if (result.code !== 200) {
                  $.showNotice("ERROR", "启动API失败!");
                 console.log("启动API失败", result);
                 return
             }
             var res = result.data;
             if (res == 0) {
                  $.showNotice("ERROR", "大哥,启动API好像失败了!");
                 console.log(result)
             }else if(res == -1){
                  $.showNotice("ERROR", "启动API失败,请先启动应用程序后才能启动API!");
             } else {
                  $.showNotice("ERROR", "启动API成功!");
                 location.reload();
             }
         },
         error : function() {
             debugger
        	 $(".show-tips-model").hide();
              $.showNotice("ERROR", "启动API失败!");
         }
     });
}

//暂停API
function stopAPI(appName,id) {
	if (window.confirm(('暂停可能影响你的业务,确定暂停吗?'))) {
	 $.ajax({
         type : "post",
         url : '/static/api/stop/'+appName+'/'+ id,
         async : true,
         dataType : "json",
         success : function(result) {
             if (result.code == 200) {
            	 location.reload();
                 return;
             }
              $.showNotice("ERROR", "暂停API失败!");
             console.log("暂停API失败", result);
         },
         error : function() {
              $.showNotice("ERROR", "暂停API失败!");
         }
     });
	}
}

//刷新API的监控信息
function reloadTrack(appName,apiName) {
    $.ajax({
        type : "post",
        url : '/static/trackInfo/' +appName+ "/" + apiName,
        async : true,
        dataType : "json",
        success : function(result) {
            if (result.code !== 200) {
                 $.showNotice("ERROR", "获取数据失败!");
                console.log("获取数据失败", result);
                return;
            }

            var item = result.data;
            $(".track-request-count").text(item.rc);
            $(".track-succeeded-count").text(item.rc - item.ec);
            $(".track-failure-count").text(item.ec);
            var track = item.track;
            $(".track-info-body").html('');
            var avgOverallSum=0;
            var avgReuqestSum=0;
            for (var i = 0; i < track.length; i++) {
                avgOverallSum+=track[i].overallTime;
                avgReuqestSum+=track[i].requestTime;
                var txt = "<tr style='text-align: center'><td>" +
                        track[i].time + "</td><td>" +
                        track[i].overallTime + "</td><td>" +
                        track[i].requestTime + "</td><td>" +
                        track[i].requestBodyLen + "</td><td>" +
                        track[i].responseBodyLen + "</td></tr>";
                $(".track-info-body").append($(txt));
            }
            if(avgOverallSum!=0){
                console.log(parseInt(avgOverallSum/track.length));
                $(".avg-overall").text(parseInt(avgOverallSum/track.length));
                $(".avg-request").text(parseInt(avgReuqestSum/track.length));
            }
        },
        error : function() {
             $.showNotice("ERROR", "获取数据失败!");
        }
    });
}
</script>
</body>

</html>